<template>
  <div>
    <div class="table-base">
      <header>
        <template>
          <slot name="crumb"></slot>
        </template>
        <template>
          <slot name="header"></slot>
        </template>
      </header>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%;"
        v-loading="loading"
        :row-style="tableRowStyle"
        :header-cell-style="tableHeaderColor"
      >
        <template>
          <slot name="container"></slot>
        </template>
      </el-table>
    </div>
    <!-- <div class="block" v-if="showPagiantion">
            <el-pagination
                v-loading="loading"
                background
                @current-change="handleCurrentChange"
                :page-size="100"
                layout="prev, pager, next, jumper"
                :total="1000">
            </el-pagination>
    </div>-->
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    tableData: {
      type: Array
    },
    totalLen: {
      type: String
    },
    tableRowStyle: {
      type:Function,
      default: function ({ row, rowIndex }) {
        if (rowIndex % 2 == 0) {
          return "background-color: #efefef";
        } else {
          return "background-color: #f9f9f9";
        }
      }
    },
    tableHeaderColor: {
      type:Function,
      default: function({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return "background-color:#bee1f4;color:#6f7075;font-weight: 500;";
        }
      }
    },
    loading: false
  },
  data() {
    return {
      showPagiantion: false
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("page-change", val);
      console.log(`当前页: ${val}`);
    }
  },
  mounted() {
    setTimeout(() => {
      console.log(this.totalLen);
      // 实例在挂载阶段还没拿到数据，需要等待一下才可更新数据再做判断，否则为默认值
      this.showPagiantion = this.totalLen > 10 ? true : false;
    }, 1000);
  }
};
</script>
<style lang="scss" scoped>
.table-base {
  //padding: 20px;
  padding-bottom: 20px;
  .crumb-wrapper {
    margin-bottom: 20px;
  }
}
.el-pagination {
  width: 550px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -275px;
  text-align: center;
  /deep/ &.is-background {
    //深度选择符作用于子组件
    .el-pager {
      li {
        // background-color: #fff;
      }
    }
  }
}
</style>
